<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>月考勤查询</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/icon.css">
<style type="text/css">
</style>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery-1.8.0.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="<%=path%>/js/post.js"></script>
<script type="text/javascript">
	var path = '${pageContext.request.contextPath}';
	
	function showRemove(){
		var grid = $('#grid');
		var row = grid.datagrid('getSelected');
		if (!row) {
			$.messager.alert('提示','请选择数据!');
			return;
		}
		
		$('#formRemove').form('clear');
						
		var date=new Date();
		var dateString=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
		$('#removeStartDate').datebox('setValue', dateString);	
		$('#removeEndDate').datebox('setValue', dateString);

		$('#removeEmployeeId').val(row.id);
		$('#removeEmployeeName').val(row.name);
		$('#dlgRemove').dialog('open');
	}
	
	function saveRemove(){
		var url = path + '/leave/saveRemove/';		
		
		var data='employeeId='+$('#removeEmployeeId').val();
		data+='&startDate='+$('#removeStartDate').datebox('getValue');
		data+='&endDate='+$('#removeEndDate').datebox('getValue');				
		data+='&reason='+$('#removeReason').val();
	
		postString($('#dlgRemove'), $('#formRemove'), $('#grid'), url, data);
	}
	
	function showLeave(){
		var grid = $('#grid');
		var row = grid.datagrid('getSelected');
		if (!row) {
			$.messager.alert('提示','请选择数据!');
			return;
		}
		
		$('#formLeave').form('clear');
				
		var combobox=$('#leaveValue');
		var data= combobox.combobox('getData');
		if(data && data.length && data.length>0){
			combobox.combobox('select', data[0].value);
		}
		
		var date=new Date();
		var dateString=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
		$('#leaveStartDate').datebox('setValue', dateString);	
		$('#leaveEndDate').datebox('setValue', dateString);

		$('#leaveEmployeeId').val(row.id);
		$('#leaveEmployeeName').val(row.name);
		$('#dlgLeave').dialog('open');
	}
	
	function saveLeave(){
		var url = path + '/leave/save/';		
		
		var data='employeeId='+$('#leaveEmployeeId').val();
		data+='&startDate='+$('#leaveStartDate').datebox('getValue');
		data+='&endDate='+$('#leaveEndDate').datebox('getValue');		
		data+='&value='+$('#leaveValue').combobox('getValue');			
		data+='&reason='+$('#leaveReason').val();
	
		postString($('#dlgLeave'), $('#formLeave'), $('#grid'), url, data);
	}

	function showSpecial(){
		var grid = $('#grid');
		var row = grid.datagrid('getSelected');
		if (!row) {
			$.messager.alert('提示','请选择数据!');
			return;
		}
		$('#formSpecial').form('clear');
		
		var date=new Date();
		var dateString=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()
			+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
		$('#specialcardDate').datebox('setValue', dateString);	
		
		$('#specialEmployeeId').val(row.id);
		$('#specialEmployeeName').val(row.name);
		$('#dlgSpecial').dialog('open');
	}
	
	function saveSpecial(){
		var path = '<%=path%>';
		var name='special';
		var url = path + '/'+name+'/save/';		
		postJson($('#dlgSpecial'), $('#formSpecial'), $('#grid'), url, name);
	}

	function  onLoadSuccess(data){
		var fonts=$('.titleFont');
		fonts.removeAttr("color");
		if (!data.holidaies) {
			return;
		}
		$.each(data.holidaies, function(index, value) {
			fonts.each(function() {
			  	if($(this).html()==value+""){
			  		$(this).attr("color","greeen");
			  	}
			});
		});
	}
	
	function onLoadSuccessTree(row, data) {
		var tree = $('#tree');
		var root = tree.treegrid('getRoot');
		if (!root) {
			return;
		}
		tree.treegrid('select',root.id);
		loadGird();
	}

	function loadGird(){
		var key=$('#searchKey').val();
		var tree = $('#tree');
		var row = tree.treegrid('getSelected');
		
		if (!row) {
			return;
		}
		var grid = $('#grid');
		grid.datagrid('loadData', []);
		grid.datagrid('load', { 
			id : row.id,
			key : key,
			year: $('#year').numberspinner('getValue'),
			month: $('#month').numberspinner('getValue')
		});
	}
	
	function print(){
		var key=$('#searchKey').val();
		var tree = $('#tree');
		var row = tree.treegrid('getSelected');
		
		if (!row) {
			return;
		}
		var id = row.id;
		var	year = $('#year').numberspinner('getValue');
		var	month = $('#month').numberspinner('getValue');
		
		var url = path + '/monthwork/print/?id=' + id;
		url += '&key=' + key;
		url += '&year=' + year;
		url += '&month=' + month;
		window.open(url, "_blank", "toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no");
	}
	
	$(function () {
		var date = new Date();
		$('#year').numberspinner('setValue', date.getFullYear());
		$('#month').numberspinner('setValue', date.getMonth()+1);
	});
</script>
</head>
<body class="easyui-layout">

	<!-- 添加考勤窗體 -->
	<div id="dlgSpecial" class="easyui-dialog" title="添加考勤"
		style="width:240px;height:180px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						saveSpecial();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgSpecial').dialog('close');
					}
				}]
			">
		<form id="formSpecial" method="post">
			<table>
				<tr>
					<td>员工:</td>
					<td><input id="specialEmployeeId" name="employeeId"
						type="hidden" /><input id="specialEmployeeName"
						class="easyui-validatebox" type="text" readonly="readonly" /></td>
				</tr>
				<tr>
					<td>日期:</td>
					<td><input id="specialcardDate" name="cardDate"
						data-options="showSeconds:true,required:true"
						class="easyui-datetimebox" type="text" /></td>
				</tr>
				<tr>
					<td>原因:</td>
					<td><input id="specialReason" name="reason"
						data-options="required:true" class="easyui-validatebox"
						type="text" /></td>
				</tr>

			</table>
		</form>
	</div>

	<!-- 添加请假窗體 -->
	<div id="dlgLeave" class="easyui-dialog" title="添加请假"
		style="width:250px;height:240px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						saveLeave();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgLeave').dialog('close');
					}
				}]
			">
		<form id="formLeave" method="post">
			<table>
				<tr>
					<td>员工:</td>
					<td><input id="leaveEmployeeId" type="hidden" /><input
						id="leaveEmployeeName" class="easyui-validatebox" type="text"
						readonly="readonly" />
					</td>
				</tr>
				<tr>
					<td>日期 从:</td>
					<td><input id="leaveStartDate" data-options="required:true"
						class="easyui-datebox" type="text" />
					</td>
				</tr>
				<tr>
					<td>到:</td>
					<td><input id="leaveEndDate" data-options="required:true"
						class="easyui-datebox" type="text" />
					</td>
				</tr>
				<tr>
					<td>类型:</td>
					<td><input class="easyui-combobox" readonly="readonly"
						id="leaveValue"
						data-options="
					url:'<%=path%>/datamap/loadAll/',
					required: true,
					editable: false,
					valueField:'value',
					textField:'value',
					panelHeight:'auto'
					" />
					</td>
				</tr>

				<tr>
					<td>原因:</td>
					<td><input id="leaveReason" data-options="required:false"
						class="easyui-validatebox" type="text" /></td>
				</tr>

			</table>
		</form>
	</div>


	<!-- 添加补班窗體 -->
	<div id="dlgRemove" class="easyui-dialog" title="添加补班"
		style="width:250px;height:220px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						saveRemove();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgRemove').dialog('close');
					}
				}]
			">
		<form id="formRemove" method="post">
			<table>
				<tr>
					<td>员工:</td>
					<td><input id="removeEmployeeId" type="hidden" /><input
						id="removeEmployeeName" class="easyui-validatebox" type="text"
						readonly="readonly" />
					</td>
				</tr>
				<tr>
					<td>日期 从:</td>
					<td><input id="removeStartDate" data-options="required:true"
						class="easyui-datebox" type="text" />
					</td>
				</tr>
				<tr>
					<td>到:</td>
					<td><input id="removeEndDate" data-options="required:true"
						class="easyui-datebox" type="text" />
					</td>
				</tr>

				<tr>
					<td>原因:</td>
					<td><input id="removeReason" data-options="required:false"
						class="easyui-validatebox" type="text" /></td>
				</tr>

			</table>
		</form>
	</div>


	<!-- 部门 -->
	<div data-options="region:'west',split:true" style="width:160px;">
		<table id="tree" class="easyui-treegrid"
			data-options="
				fit:true,
				url: '<%=path%>/department/loadAll',
				idField: 'id',
				treeField: 'name',
				onLoadSuccess: onLoadSuccessTree,
				onClickRow: loadGird,
				queryParams:{id:2}
			">
			<thead>
				<tr>
					<th data-options="field:'name'" width="140">部门名称</th>
				</tr>
			</thead>
		</table>
	</div>


	<!-- 工具栏 -->
	<div id="tb" style="height:auto">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
				onclick="showSpecial()">添加考勤</a> <a href="#"
				class="easyui-linkbutton" iconCls="icon-add" plain="true"
				onclick="showLeave()">添加请假</a> <a href="#" class="easyui-linkbutton"
				iconCls="icon-add" plain="true" onclick="showRemove()">添加补班</a> <a
				href="#" class="easyui-linkbutton" iconCls="icon-print" plain="true"
				onclick="print()">打印预览</a>
		</div>
		<div>
			年份:<input class="easyui-numberspinner" value="2014" id="year"
				style="width: 50px;"
				data-options="min:2010,max:2025,required:true,onChange:loadGird">
			月份:<input class="easyui-numberspinner" value="5" id="month"
				style="width: 40px;"
				data-options="min:1,max:12,required:true,onChange:loadGird">&nbsp&nbsp
			&nbsp&nbsp &nbsp&nbsp 检索条件: <input class="easyui-validatebox"
				type="text" id="searchKey" onchange="loadGird()"
				data-options="required:false" />
		</div>
	</div>


	<div data-options="region:'center'">
		<table id="grid" class="easyui-datagrid"
			data-options="
			sortOrder:'asc',
			sortName:'employeeCode',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/monthwork/loadAll/',
			toolbar:'#tb',
			rownumbers: true,
			showFooter: true,
			striped: true,
			onLoadSuccess: onLoadSuccess
			">
			<thead data-options="frozen:true">
				<tr>
					<th data-options="field:'departmentName',width:70,sortable:true"
						rowspan="2">单位</th>
					<th data-options="field:'employeeCode',width:70,sortable:true"
						rowspan="2">工号</th>
					<th data-options="field:'name',width:60,sortable:true" rowspan="2">姓名</th>
				</tr>
			</thead>
			<thead>
				<tr>

					<th colspan="31">出 勤 情 况</th>
					<th
						data-options="field:'days',width:50,sortable:false,align:'right'"
						rowspan="2">出勤工日</th>
					<th
						data-options="field:'day',width:40,sortable:false,align:'right'"
						rowspan="2">白班</th>
					<th
						data-options="field:'night',width:40,sortable:false,align:'right'"
						rowspan="2">夜班</th>
					<th
						data-options="field:'full',width:40,sortable:false,align:'right'"
						rowspan="2">白连夜</th>
					<th
						data-options="field:'late',width:40,sortable:false,align:'right'"
						rowspan="2">迟到</th>
					<th
						data-options="field:'early',width:40,sortable:false,align:'right'"
						rowspan="2">早退</th>
					<th
						data-options="field:'holiday',width:40,sortable:false,align:'right'"
						rowspan="2">休息</th>
					<th
						data-options="field:'leave',width:40,sortable:false,align:'right'"
						rowspan="2">休假</th>
				</tr>
				<tr>
					<th
						data-options="field:'d1',width:30,sortable:false,align:'center'"><font
						class="titleFont">1</font>
					</th>
					<th
						data-options="field:'d2',width:30,sortable:false,align:'center'"><font
						class="titleFont">2</font>
					</th>
					<th
						data-options="field:'d3',width:30,sortable:false,align:'center'"><font
						class="titleFont">3</font></th>
					<th
						data-options="field:'d4',width:30,sortable:false,align:'center'"><font
						class="titleFont">4</font>
					</th>
					<th
						data-options="field:'d5',width:30,sortable:false,align:'center'"><font
						class="titleFont">5</font>
					</th>
					<th
						data-options="field:'d6',width:30,sortable:false,align:'center'"><font
						class="titleFont">6</font>
					</th>
					<th
						data-options="field:'d7',width:30,sortable:false,align:'center'"><font
						class="titleFont">7</font>
					</th>
					<th
						data-options="field:'d8',width:30,sortable:false,align:'center'"><font
						class="titleFont">8</font>
					</th>
					<th
						data-options="field:'d9',width:30,sortable:false,align:'center'"><font
						class="titleFont">9</font>
					</th>
					<th
						data-options="field:'d10',width:30,sortable:false,align:'center'"><font
						class="titleFont">10</font>
					</th>
					<th
						data-options="field:'d11',width:30,sortable:false,align:'center'"><font
						class="titleFont">11</font>
					</th>
					<th
						data-options="field:'d12',width:30,sortable:false,align:'center'"><font
						class="titleFont">12</font>
					</th>
					<th
						data-options="field:'d13',width:30,sortable:false,align:'center'"><font
						class="titleFont">13</font>
					</th>
					<th
						data-options="field:'d14',width:30,sortable:false,align:'center'"><font
						class="titleFont">14</font>
					</th>
					<th
						data-options="field:'d15',width:30,sortable:false,align:'center'"><font
						class="titleFont">15</font>
					</th>
					<th
						data-options="field:'d16',width:30,sortable:false,align:'center'"><font
						class="titleFont">16</font>
					</th>
					<th
						data-options="field:'d17',width:30,sortable:false,align:'center'"><font
						class="titleFont">17</font>
					</th>
					<th
						data-options="field:'d18',width:30,sortable:false,align:'center'"><font
						class="titleFont">18</font>
					</th>
					<th
						data-options="field:'d19',width:30,sortable:false,align:'center'"><font
						class="titleFont">19</font>
					</th>
					<th
						data-options="field:'d20',width:30,sortable:false,align:'center'"><font
						class="titleFont">20</font>
					</th>
					<th
						data-options="field:'d21',width:30,sortable:false,align:'center'"><font
						class="titleFont">21</font>
					</th>
					<th
						data-options="field:'d22',width:30,sortable:false,align:'center'"><font
						class="titleFont">22</font>
					</th>
					<th
						data-options="field:'d23',width:30,sortable:false,align:'center'"><font
						class="titleFont">23</font>
					</th>
					<th
						data-options="field:'d24',width:30,sortable:false,align:'center'"><font
						class="titleFont">24</font>
					</th>
					<th
						data-options="field:'d25',width:30,sortable:false,align:'center'"><font
						class="titleFont">25</font>
					</th>
					<th
						data-options="field:'d26',width:30,sortable:false,align:'center'"><font
						class="titleFont">26</font>
					</th>
					<th
						data-options="field:'d27',width:30,sortable:false,align:'center'"><font
						class="titleFont">27</font>
					</th>
					<th
						data-options="field:'d28',width:30,sortable:false,align:'center'"><font
						class="titleFont">28</font>
					</th>
					<th
						data-options="field:'d29',width:30,sortable:false,align:'center'"><font
						class="titleFont">29</font>
					</th>
					<th
						data-options="field:'d30',width:30,sortable:false,align:'center'"><font
						class="titleFont">30</font>
					</th>
					<th
						data-options="field:'d31',width:30,sortable:false,align:'center'"><font
						class="titleFont">31</font>
					</th>

				</tr>
			</thead>
		</table>

	</div>
</body>
</html>